<template>
  <div class="songitem">
    <span>
      <router-link to="/recommend">
        <img src="../assets/return.png" alt="" />
      </router-link>
    </span>
    <!-- {{musicID}} -->
    <Poster :playlist="songlist"></Poster>
    <!-- <SongList @play="$emit('play',$event)" :songs="showList" :showNum="showNumber"></SongList> -->
    <SongItemOnly
      :songlist="songlist"
      @play="$emit('play', $event)"
    ></SongItemOnly>
    <BorderTitle>歌单评论</BorderTitle>
    <Comment :comments="comments"></Comment>
  </div>
</template>

<script>
import Poster from "@/components/Poster.vue";
import SongItemOnly from "@/components/SongItemOnly.vue";
import BorderTitle from "@/components/BorderTitle.vue";
import Comment from "@/components/Comment.vue";

export default {
  name: "SongItem",
  data() {
    return {
      musicID: 0,
      songlist: null,
      comments: null,
    };
  },
  props: ["id"],
  created() {
    this.musicID = this.$route.params.id;
    this.$http
      .get("/playlist/detail", {
        params: {
          id: this.musicID,
        },
      })
      .then((d) => {
        this.songlist = d.data.playlist;
      });

    this.$http
      .get("/comment/playlist", {
        params: {
          id: this.musicID,
        },
      })
      .then((d) => {
        this.comments = d.data.comments;
        // console.log(this.comments);
      });
  },
  components: {
    Poster,
    SongItemOnly,
    BorderTitle,
    Comment,
  },
};
</script>
<style lang="less" scoped>
.songitem {
  padding-top: 15px;
  span {
    position: fixed;
    top: 70px;
    left: 5px;
    z-index: 8;
  }
}
</style>